<template>
  <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    label-width="120px"
    class="demo-ruleForm"
    :rules="rules"
    status-icon
  >
    <el-form-item label="菜单名称" prop="title">
      <el-input v-model="ruleForm.title" type="title" autocomplete="off" />
    </el-form-item>
    <el-form-item label="上级菜单" prop="level">
      <el-select placeholder="请选择" v-model="check">
        <template v-for="(item, index) in list" :key="index">
          <el-option :label="item" :value="item" />
        </template>
      </el-select>
    </el-form-item>
    <el-form-item label="前端名称" prop="name">
      <el-input
        v-model="ruleForm.name"
        :disabled="route.query.id ? true : false"
      />
    </el-form-item>
    <el-form-item label="前端图标" prop="icon">
      <el-input
        v-model.number="ruleForm.icon"
        :disabled="route.query.id ? true : false"
      />
    </el-form-item>
    <el-form-item label="是否显示" prop="hidden">
      <el-radio-group v-model="radio1" @change="group(Number(radio1))">
        <el-radio label="0" size="large">是</el-radio>
        <el-radio label="1" size="large">否</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="排序" prop="sort">
      <el-input v-model="ruleForm.sort" type="textarea" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm"> 提交 </el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { ElMessage, FormInstance } from "element-plus";
import { useRoute, useRouter } from "vue-router";
import {
  createMenuAPI,
  editMenuList,
  menuUpdateAPI,
  getMenuList,
} from "./api/menu";

const check = ref("");
const radio1 = ref("1");
const route = useRoute();
const router = useRouter();
const ruleFormRef = ref<FormInstance>();
const queryParams = reactive<IMenuListParams>({
  parentId: 0,
  pageNum: 1,
  pageSize: 10,
});

const ruleForm = reactive<IMenuCreateParams>({
  name: "",
  sort: 0,
  title: "",
  hidden: 0,
  icon: "",
  id: 0,
  level: 0,
  parentId: 0,
});

ruleForm.hidden = Number(radio1.value);

const list = ref<string[]>();
const rules = reactive({
  title: [{ required: true, message: "菜单名称不能为空", trigger: "blur" }],
  name: [{ required: true, message: "前端名称不能为空", trigger: "blur" }],
});

const group = (radio: number) => {
  ruleForm.hidden = radio;
};
const getMenuListAPI = () => {
  getMenuList(queryParams).then((res) => {
    list.value = res.data.list.map((item) => {
      return item.title;
    });
    // console.log(res);
  });
};
getMenuListAPI();

ruleForm.id = Number(route.query.id);

// 修改,请求回来渲染
if (route.query.id) {
  queryParams.parentId = Number(route.query.id);
  editMenuList(Number(route.query.id)).then((res) => {
    ruleForm.title = res.data.title;
    check.value = res.data.parentId === 0 ? "无上级菜单" : res.data.title;
    ruleForm.name = res.data.name;
    ruleForm.icon = res.data.icon;
    ruleForm.hidden = res.data.hidden;
    radio1.value = String(res.data.hidden);
    ruleForm.sort = res.data.sort;
  });
}
const submitForm = () => {
  if (!route.query.id) {
    createMenuAPI(ruleForm)
    ElMessage.success("添加成功");
    console.log("添加成功");
    setTimeout(() => {
      router.push("/ums/menu");
    }, 1500);
  } else {
    // 修改
    menuUpdateAPI(ruleForm).then((res) => {
      if (res.code === 200) {
        ElMessage.success("修改成功");
        console.log("修改成功");
      }
    });
    setTimeout(() => {
      router.push("/ums/menu");
    }, 1500);
  }
};
</script>
